<template>
  <div>
    <div id="edit-top">
      <el-form :inline="true" :model="article">
        <el-form-item label="作者">
          <el-input v-model="article.author" placeholder="作者"></el-input>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="article.title" placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item v-if="!isPulish">
          <span>创建时间：{{article.createTime}}</span>
        </el-form-item>
        <el-form-item label="标签">
          <el-checkbox-group v-model="tempTags">
            <el-checkbox label="2">前端</el-checkbox>
            <el-checkbox label="1">后端</el-checkbox>
            <el-checkbox label="7">闲谈</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="onSubmit" v-if="!isPulish">提交修改</el-button>
          <el-button size="mini" type="primary" @click="onPublish" v-else>发表</el-button>
        </el-form-item>
      </el-form>
    </div>

    <br />

    <vue-tinymce v-model="article.content" :setting="setting" />

    <div>
      <el-upload ref="upload" action="http://localhost:8001/qiniu/upload" class="upload-item" drag multiple
        :auto-upload="false" :on-success="onSuccessCallBack" :on-change="onChangeCallBack" :on-error="onErrorCallBack"
        style="margin-top: 10px; float: left;">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">选择文章封面，或<em>点击上传</em></div>
        <div class="el-upload__tip">只能上传jpg/png文件，且不超过1M</div>
      </el-upload>
      <div class="block" style="width: 180px;float: left;margin-top: 10px; margin-left: 10px;">
        <el-image :src="article.cover" fit="fill"></el-image>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getArticleById,
    insert,
    updateOne
  } from '@/api/Article.js'

  import {
    listTagMsg
  } from '@/api/Label.js'

  export default {
    data() {
      return {
        article: {
          "id": 1,
          "author": "",
          "title": "",
          "content": "",
          "cover": "http://server.forgirl.top/default.jpg",
          "tags": {}
        },
        setting: {
          menubar: false,
          toolbar: "undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |",
          toolbar_drawer: "sliding",
          quickbars_selection_toolbar: "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
          plugins: "link image media table lists fullscreen quickbars",
          language: 'zh_CN', //本地化设置
          // height: 350
          height: 480
        },
        isPulish: false,
        tags: null,
        tempTags: []
      }
    },

    mounted() {
      var that = this
      if (this.$route.params.id == 0) {
        this.isPulish = true
        this.article = {
          "id": 1,
          "author": "",
          "title": "",
          "content": "",
          "cover": "http://server.forgirl.top/default.jpg",
          "tags": {}
        }
      } else {
        getArticleById(this.$route.params.id).then(resp => {
          that.article = resp.data
        }).catch(error => {
          console.log(error)
        })
      }

      listTagMsg().then(resp => {
        that.tags = resp.data
      })
    },

    methods: {
      onPublish() {
        var that = this
        
        this.article.tags = {}
        if (this.tempTags.length == 0) {
          this.$message("请选择标签")
          return
        }
        for (var i in this.tempTags) {
          this.article.tags[this.tempTags[i]] = this.tags[this.tempTags[i]].tag
        }
        
        insert(this.article).then(resp => {
          that.$message({
            type: 'success',
            message: '成功发表'
          })
          that.$router.push('/article/index')
        }).catch(error => {
          console.log(error)
        })

      },

      onSubmit() {
        var that = this

        this.article.tags = {}
        if (this.tempTags.length == 0) {
          this.$message("请选择标签")
          return
        }
        for (var i in this.tempTags) {
          this.article.tags[this.tempTags[i]] = this.tags[this.tempTags[i]].tag
        }

        updateOne(this.article).then(resp => {
          that.$message({
            type: 'success',
            message: '提交修改成功'
          })
          that.$router.push('/article/index')
        }).catch(error => {
          console.log(error)
        })
      },

      onSuccessCallBack(response, file, fileList) {
        this.article.cover = response.data.data.key
      },

      onErrorCallBack(response, file, fileList) {
        this.$message.error('上传失败，请稍后尝试')
        console.log(response)
      },

      onChangeCallBack(file, fileList) {
        this.uploadFile = file
      },
    }
  }
</script>

<style>
  #edit-top {
    margin-top: 10px;
  }
</style>
